<template>
  <div class="bigBox">
    <div class="steps">
      <el-steps
        :space="200"
        :active="data?.status! + 1"
        finish-status="success"
        align-center
      >
        <el-step
          title="提交订单"
          :description="dateFormat(data?.createTime!)"
        />
        <el-step
          title="支付订单"
          :description="dateFormat(data?.paymentTime!)"
        />
        <el-step
          title="平台发货"
          :description="dateFormat(data?.deliveryTime!)"
        />
        <el-step
          title="确认收货"
          :description="dateFormat(data?.receiveTime!)"
        />
        <el-step
          title="完成评价"
          :description="dateFormat(data?.modifyTime!)"
        />
      </el-steps>
    </div>
    <div>
      <!-- 头部 -->
      <div class="header">
        <!-- 字体图标 -->
        <div class="icon">
          <el-icon color="rgb(245, 108, 108)" size="20px"
            ><WarningFilled
          /></el-icon>
          <span>当前订单状态：{{ orderStatusFn(data?.status!) }}</span>
        </div>
        <div class="btn">
          <el-button @click="showOrder.$state.show = true">订单追踪</el-button>
          <el-button>发送站内信</el-button>
          <el-button>备注订单</el-button>
        </div>
      </div>
      <!-- 内容 -->
      <div class="body">
        <!-- 第一个表格 -->
        <div class="title">
          <el-icon><Briefcase /></el-icon>
          <span>基本信息</span>
        </div>
        <div class="basic">
          <table>
            <tr class="bgc">
              <td>订单编号</td>
              <td>发货单流水号</td>
              <td>用户账号</td>
              <td>支付方式</td>
              <td>订单来源</td>
              <td>订单类型</td>
            </tr>
            <tr class="con">
              <td>{{ data?.orderSn }}</td>
              <td>暂无</td>
              <td>{{ data?.memberUsername! }}</td>
              <td>{{ payTypeFn(data?.payType!) }}</td>
              <td>{{ data?.sourceType === 1 ? "APP订单" : "PC订单" }}</td>
              <td>{{ data?.orderType === 1 ? "秒杀订单" : "正常订单" }}</td>
            </tr>
            <tr class="bgc">
              <td>配送方式</td>
              <td>物流单号</td>
              <td>自动收货时间</td>
              <td>订单可得优币</td>
              <td>订单可得值</td>
              <td>活动信息</td>
            </tr>
            <tr class="con">
              <td>{{ data?.deliveryCompany || "暂无" }}</td>
              <td>{{ data?.deliverySn || "暂无" }}</td>
              <td>{{ data?.autoConfirmDay + "天" }}</td>
              <td>{{ data?.integration || "暂无" }}</td>
              <td>{{ data?.growth || "暂无" }}</td>
              <td style="width: 180px">{{ data?.promotionInfo }}</td>
            </tr>
          </table>
        </div>
        <!-- 第二个表格 -->
        <div class="title">
          <el-icon><Briefcase /></el-icon>
          <span>收货人信息</span>
        </div>
        <div class="basic">
          <table>
            <tr class="bgc">
              <td>收货人</td>
              <td>手机号码</td>
              <td>邮政编码</td>
              <td>收货地址</td>
            </tr>
            <tr class="con">
              <td>{{ data?.receiverName }}</td>
              <td>{{ data?.receiverPhone }}</td>
              <td>{{ data?.receiverPostCode }}</td>
              <td>
                {{
                  data?.receiverProvince! +
                  data?.receiverCity! +
                  data?.receiverRegion +
                  data?.receiverDetailAddress
                }}
              </td>
            </tr>
          </table>
        </div>
        <!-- 第三个表格 -->
        <div class="title">
          <el-icon><Briefcase /></el-icon>
          <span>商品信息</span>
        </div>
        <div>
          <el-table :data="data?.orderItemList" style="width: 100%">
            <el-table-column prop="date" label="商品图片" width="180">
              <template #default="{ row }">
                <!-- :preview-src-list="row.productPic" -->
                <el-image
                  style="width: 100px; height: 100px"
                  :src="row.productPic"
                  :zoom-rate="1.2"
                  :initial-index="4"
                  fit="cover"
                />
              </template>
            </el-table-column>
            <el-table-column prop="productName" label="商品名称" width="180">
              <template #default="{ row }">
                <div>{{ row.productName }}</div>
                <div>品牌:{{ row.productBrand }}</div>
              </template>
            </el-table-column>
            <el-table-column prop="productPrice" label="价格/货号">
              <template #default="{ row }">
                <div>价格:{{ moneyFormat(row.productPrice) }}</div>
                <div>货号:{{ row.productSn }}</div>
              </template>
            </el-table-column>
            <el-table-column prop="productAttr" label="属性">
              <template #default="{ row }">
                <div>
                  {{
                    JSON.parse(row.productAttr)[0].key +
                    ":" +
                    JSON.parse(row.productAttr)[0].value +
                    ";"
                  }}
                  {{
                    JSON.parse(row.productAttr)[1].key +
                    ":" +
                    JSON.parse(row.productAttr)[1].value +
                    ";"
                  }}
                </div>
              </template>
            </el-table-column>
            <!-- productQuantity -->
            <el-table-column prop="address" label="数量">
              <template #default="{ row }">
                <div>
                  {{ row.productQuantity }}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="address" label="小计">
              <template #default="{ row }">
                <div>
                  {{ moneyFormat(row.productPrice) }}
                </div>
              </template>
              <!-- productPrice -->
            </el-table-column>
          </el-table>
          <div class="total">
            合计:
            <span>{{
              "  " +
              "¥" +
              "  " +
              data?.orderItemList.reduce((prev, cur) => {
                return prev + cur.productPrice;
              }, 0)
            }}</span>
          </div>
        </div>
        <!-- 第四个表格 -->
        <div class="title">
          <el-icon><Briefcase /></el-icon>
          <span>费用信息</span>
        </div>
        <div class="basic">
          <table>
            <tr class="bgc">
              <td>商品合计</td>
              <td>运费</td>
              <td>优惠券</td>
              <td>积分抵扣</td>
            </tr>
            <tr class="con">
              <td>
                {{
                  "  " +
                  "¥" +
                  "  " +
                  data?.orderItemList.reduce((prev, cur) => {
                    return prev + cur.productPrice;
                  }, 0)
                }}
              </td>
              <td>{{ "¥" + data?.freightAmount! }}</td>
              <td>{{ "-" + "¥" + data?.couponAmount! }}</td>
              <td>{{ "-" + "¥" + data?.discountAmount! }}</td>
            </tr>
            <tr class="bgc">
              <td>活动优惠</td>
              <td>折扣金额</td>
              <td>订单总金额</td>
              <td>应付款金额</td>
            </tr>
            <tr class="con">
              <td>{{ "-" + moneyFormat(data?.promotionAmount!) }}</td>
              <td>{{ "-" + moneyFormat(data?.integrationAmount!) }}</td>
              <td>{{ moneyFormat(data?.totalAmount!) }}</td>
              <td>{{ moneyFormat(data?.payAmount!) }}</td>
            </tr>
          </table>
        </div>
        <!-- 第五个表格 -->
        <div class="title">
          <el-icon><Briefcase /></el-icon>
          <span>操作信息</span>
        </div>
        <div>
          <el-table :data="data?.historyList" style="width: 100%">
            <el-table-column prop="operateMan" label="操作者" width="180" />
            <el-table-column prop="name" label="操作时间" width="180">
              <template #default="{ row }">
                <div>
                  {{ dateFormat(row.createTime) }}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="address" label="订单状态">
              <template #default="{ row }">
                <div>
                  {{ orderStatusFn(row.orderStatus) }}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="address" label="付款状态">
              <template #default="{ row }">
                <div>
                  {{ data?.deleteStatus == 0 ? "已退款" : "待退款" }}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="address" label="发货状态">
              <template #default="{ row }">
                <div>
                  {{ data?.confirmStatus == 0 ? "已发货" : "待发货" }}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="address" label="备注">
              <!-- note -->
              <template #default="{ row }">
                <div>
                  {{ row.note }}
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
  <TraceOrder />
</template>

<script setup lang="ts">
import TraceOrder from "./components/traceorder.vue";
import { ref } from "vue";
import { dateFormat, moneyFormat } from "@/utils";
import { searchOrderListApi } from "./api/api";
import { useRoute } from "vue-router";
import { WarningFilled, Briefcase } from "@element-plus/icons-vue";
import { isShowOrder } from "@/store/showOrder";
const showOrder = isShowOrder();

// 状态处理函数
const orderStatusFn = (status: number) => {
  let orderStatus;
  orderStatus =
    status === 0
      ? "待付款"
      : status === 1
      ? "待发货"
      : status === 2
      ? "已发货"
      : status === 3
      ? "已完成"
      : "已关闭";
  return orderStatus;
};
// 支付类型处理函数
const payTypeFn = (payType: number) => {
  let payment;
  payment = payType === 0 ? "未支付" : payType === 1 ? "支付宝" : "微信";
  return payment;
};
const route = useRoute();
const data = ref<INSearchOrderList>();
route.query.id &&
  searchOrderListApi(route.query.id).then((res) => {
    console.log(res.data);
    data.value = res.data;
  });
</script>

<style scoped lang="less">
.bigBox {
  padding: 0 80px;
  .steps {
    margin-top: 40px;
    margin-bottom: 50px;
  }
  .header {
    box-sizing: border-box;
    border: 1px solid #ebeef5;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 80px;
    background-color: #f2f6fc;
    width: 831px;
    margin: auto;
    .icon {
      display: flex;
      align-items: center;
      color: #f56c6c;
      margin-left: 20px;
    }
    .btn {
      margin-right: 20px;
    }
  }
  .body {
    width: 831px;
    margin: auto;
    border: 1px solid #ebeef5;
    padding: 0 20px;
    box-sizing: border-box;
    .title {
      height: 50px;
      line-height: 50px;
      font-size: 14px;
    }
  }
}
:deep(.cell) {
  text-align: center;
}

.basic {
  table {
    width: 790px;
    margin: auto;
    text-align: center;
    font-size: 14px;
  }
  table,
  tr,
  td {
    border: 1px solid #ebeef5;
    border-collapse: collapse;
  }
  .bgc {
    background-color: #f2f6fc;
    height: 40px;
  }
  .con {
    height: 60px;
  }
}
.total {
  text-align: right;
  span {
    color: red;
  }
}
</style>
